<template>
  <div class="wrap">
    <van-row class="box">
      <van-col :span="8" class="city" v-for="city of cityList" :key="city.id" @click="goFileList(city.id)">
        <div :style="{background: city.specicss}">{{ city.name }}</div>
      </van-col>
    </van-row>
  </div>
</template>
<script setup>
import { getCityList } from './api'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
const Router = useRouter()
const cityList = ref([])
onMounted(() => {
  getCityList({api_key: 'ER^%Tw'}).then(res => {
    if (res.code == 1) {
      cityList.value = res.data
    }
  })
})
const goFileList = id => {
  Router.push({
    path: '/fileList',
    query: {
      id
    }
  })
}
</script>
<style scoped>
.wrap {
  width: 100%;
  min-height: 100vh;
  padding: 190px 0 20px;
  background: url("./assets/beijing.png") no-repeat;
  background-size: cover;
  box-sizing: border-box;
}
.box {
  /* position: absolute;
  top: 190px;
  left: 10px;
  right: 10px; */
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 5px;
  margin: 0 10px;
  box-sizing: border-box;
}
.city {
  margin-bottom: 10px;
}
.city>div {
  width: 106px;
  height: 50px;
  line-height: 50px;
  /* background-color: #D1E8FF; */
  text-align: center;
  margin: 0 auto;
}
/* .city:nth-child(2n + 1) >div {
  background-color: #E6F3FE;
}  */
</style>